<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/d3.js"></script>

</head>

<body>
    <div id="svg"></div>
    <script>
        const dataset = [50, 43, 120, 87, 99, 167, 142];
        const padding = { top: 20, right: 20, bottom: 20, left: 30 };
        const height = 400;
        const width = 600;
        const xAxisWidth = width - padding.left - padding.right;
        const yAxisWidth = height - padding.bottom - padding.top;
        const svg = d3.select("#svg").append("svg").attr("width", width).attr("height", height);

        const xScale = d3.scaleBand().domain(dataset.map((d, i) => i)).range([0, xAxisWidth]).padding(0.1);
        const yScale = d3.scaleLinear().domain([d3.max(dataset, d => d), 0]).range([0, yAxisWidth]);

        const xAxis = d3.axisBottom(xScale);
        const yAxis = d3.axisLeft(yScale);

        const gx = svg.append('g').attr('transform', `translate(${padding.left},${height - padding.bottom})`);
        const gy = svg.append('g').attr('transform', `translate(${padding.left},${height - padding.bottom - yAxisWidth})`);
        gx.call(xAxis);
        gy.call(yAxis);

        const linePath = d3.line().x((d, i) => xScale(i) + padding.left + xScale.bandwidth() / 2)
            .y(d => height - padding.bottom - (yScale(0) - yScale(d)));
        const line = svg.append('path').attr('d', linePath(dataset)).attr('stroke', '#000')
            .attr('stroke-width', '3px').attr('fill', 'none');


    </script>
</body>

</html>
